<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="openBtn">打开文件</button>
    <img id="images"  style="width:100%" />
</body>

<script>
    // 引入选择文件对话框
    const { dialog } = require('@electron/remote')
    var openBtn = document.getElementById('openBtn');
    openBtn.onclick = function(){
        // 使用
        dialog.showOpenDialog({
            // 设置对话框标题
            title:'请选择本地图片文件',
            // 设置默认路径
            defaultPath:'/Users/ethan/Movies/封面纯色图片/1.png',
            // 设置过滤器
            filters:[
                {
                    name:'png',
                    extensions:['png']
                }
            ],
            // 自定义确认按钮标签
            buttonLabel:'打开本地图片',
        }).then(result=>{// 异步回调拿到选择的文件
            let image = document.getElementById('images')
            image.setAttribute("src",result.filePaths[0]);
            console.log(result)
        }).catch(err=>{
            console.log(err)
        })
    }
</script>

</html>